<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI服务平台</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 配置Tailwind主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4361ee', // 主色调：蓝色
                        secondary: '#3f37c9', // 次要色调：深紫色
                        accent: '#f72585', // 强调色：粉色
                        dark: '#1d3557', // 深色
                        light: '#f8f9fa' // 浅色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s ease-in-out;
            }
            .backdrop-blur-sm {
                backdrop-filter: blur(8px);
            }
        }
    </style>
</head>
<body class="font-sans bg-light text-dark antialiased">
    <!-- 导航栏 -->
    <header class="fixed w-full top-0 z-50 transition-custom bg-white/90 backdrop-blur-md shadow-sm">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <!-- 品牌Logo -->
                <div class="flex items-center">
                    <a href="#" class="flex items-center space-x-2">
                        <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center text-white">
                            <i class="fas fa-brain text-xl"></i>
                        </div>
                        <span class="text-xl font-bold text-primary">AI服务平台</span>
                    </a>
                </div>

                <!-- 桌面端导航 -->
                <nav class="hidden md:flex space-x-8">
                    <a href="#features" class="text-dark hover:text-primary transition-custom font-medium">功能特点</a>
                    <a href="#services" class="text-dark hover:text-primary transition-custom font-medium">服务内容</a>
                </nav>

                <!-- 登录/注册按钮 -->
                <div class="hidden md:flex items-center space-x-4">
                    <a href="#" id="login-link" class="text-primary hover:text-secondary transition-custom font-medium flex items-center cursor-pointer">
                        <i class="fas fa-user-circle mr-2"></i> 登录
                    </a>
                    <a href="#" id="register-link" class="text-primary hover:text-secondary transition-custom font-medium flex items-center cursor-pointer">
                        <i class="fas fa-user-plus mr-2"></i> 注册
                    </a>
                </div>

                <!-- 移动端菜单按钮 -->
                <div class="md:hidden">
                    <button id="menu-toggle" class="text-dark hover:text-primary focus:outline-none">
                        <i class="fas fa-bars text-2xl"></i>
                    </button>
                </div>
            </div>
        </div>

    </header>

    <!-- 英雄区域(Hero Section) -->
    <section class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-primary/5 to-secondary/5">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col lg:flex-row items-center">
                <div class="lg:w-1/2 mb-10 lg:mb-0">
                    <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-shadow">
                        智能AI服务<br>
                        <span class="text-primary">赋能你的业务</span>
                    </h1>
                    <p class="mt-6 text-lg text-gray-600 max-w-xl">
                        利用先进的人工智能技术，为企业和开发者提供高效、精准的智能服务，加速数字化转型和创新。
                    </p>
                    <div class="mt-8 flex flex-wrap gap-4">
                        <a href="#" id="hero-register-btn" class="px-6 py-3 bg-primary hover:bg-secondary text-white rounded-lg transition-custom font-medium shadow-lg shadow-primary/20 flex items-center">
                            <i class="fas fa-rocket mr-2"></i> 免费试用
                        </a>
                        <a href="#" class="px-6 py-3 bg-white hover:bg-gray-50 text-primary border border-primary rounded-lg transition-custom font-medium flex items-center">
                            <i class="fas fa-play-circle mr-2"></i> 观看演示
                        </a>
                    </div>
                </div>
                <div class="lg:w-1/2 relative">
                    <div class="relative z-10 rounded-2xl overflow-hidden shadow-2xl shadow-primary/10">
                        <img src="https://picsum.photos/800/600?random=10" alt="AI服务演示" class="w-full h-auto">
                    </div>
                    <!-- 装饰元素 -->
                    <div class="absolute -top-4 -right-4 w-32 h-32 bg-accent/20 rounded-full blur-3xl -z-10"></div>
                    <div class="absolute -bottom-6 -left-6 w-40 h-40 bg-primary/20 rounded-full blur-3xl -z-10"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- 功能特点 -->
    <section id="features" class="py-16 md:py-24 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto mb-16">
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">强大的AI功能特点</h2>
                <p class="text-lg text-gray-600">我们的AI服务具备多项先进特性，满足不同场景的需求，为你提供最优质的智能体验</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 功能卡片1 -->
                <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-xl transition-custom transform hover:-translate-y-1">
                    <div class="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center text-primary mb-5">
                        <i class="fas fa-bolt text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">高速响应</h3>
                    <p class="text-gray-600">采用优化的模型架构和高性能计算集群，确保毫秒级响应，满足实时交互需求。</p>
                </div>

                <!-- 功能卡片2 -->
                <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-xl transition-custom transform hover:-translate-y-1">
                    <div class="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center text-primary mb-5">
                        <i class="fas fa-brain text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">智能理解</h3>
                    <p class="text-gray-600">先进的自然语言处理技术，精准理解用户意图，支持多轮对话和上下文感知。</p>
                </div>

                <!-- 功能卡片3 -->
                <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-xl transition-custom transform hover:-translate-y-1">
                    <div class="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center text-primary mb-5">
                        <i class="fas fa-chart-line text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">数据分析</h3>
                    <p class="text-gray-600">强大的数据分析和机器学习能力，从海量数据中提取有价值的信息和洞察。</p>
                </div>

                <!-- 功能卡片4 -->
                <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-xl transition-custom transform hover:-translate-y-1">
                    <div class="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center text-primary mb-5">
                        <i class="fas fa-shield-alt text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">安全可靠</h3>
                    <p class="text-gray-600">采用多层安全防护机制，保障数据隐私和服务稳定性，符合行业安全标准。</p>
                </div>

                <!-- 功能卡片5 -->
                <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-xl transition-custom transform hover:-translate-y-1">
                    <div class="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center text-primary mb-5">
                        <i class="fas fa-plug text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">灵活集成</h3>
                    <p class="text-gray-600">提供多种开发工具和SDK，支持快速集成到各类应用、网站和业务系统中。</p>
                </div>

                <!-- 功能卡片6 -->
                <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-xl transition-custom transform hover:-translate-y-1">
                    <div class="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center text-primary mb-5">
                        <i class="fas fa-globe text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">多语言支持</h3>
                    <p class="text-gray-600">支持全球多种语言和方言，满足跨国企业和多语言用户的需求。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 服务内容 -->
    <section id="services" class="py-16 md:py-24">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto mb-16">
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">我们的AI服务</h2>
                <p class="text-lg text-gray-600">提供全方位的人工智能服务，覆盖自然语言处理、计算机视觉、数据分析等多个领域</p>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                <div>
                    <div class="space-y-8">
                        <!-- 服务项1 -->
                        <div class="flex">
                            <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary mr-4">
                                <i class="fas fa-comment-dots text-xl"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-bold mb-2">智能对话系统</h3>
                                <p class="text-gray-600">基于先进的自然语言处理技术，打造智能客服、虚拟助手等对话应用，支持多轮交互和上下文理解。</p>
                            </div>
                        </div>

                        <!-- 服务项2 -->
                        <div class="flex">
                            <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary mr-4">
                                <i class="fas fa-language text-xl"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-bold mb-2">机器翻译</h3>
                                <p class="text-gray-600">支持全球多种语言的实时翻译，准确率高，响应快，可应用于跨境沟通、内容本地化等场景。</p>
                            </div>
                        </div>

                        <!-- 服务项3 -->
                        <div class="flex">
                            <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary mr-4">
                                <i class="fas fa-image text-xl"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-bold mb-2">计算机视觉</h3>
                                <p class="text-gray-600">提供图像识别、物体检测、人脸识别等视觉智能服务，广泛应用于安防、零售、医疗等行业。</p>
                            </div>
                        </div>

                        <!-- 服务项4 -->
                        <div class="flex">
                            <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary mr-4">
                                <i class="fas fa-chart-pie text-xl"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-bold mb-2">数据分析与预测</h3>
                                <p class="text-gray-600">利用机器学习算法对海量数据进行分析和建模，提供精准的趋势预测和决策支持。</p>
                            </div>
                        </div>
                    </div>

                    <div class="mt-10">
                        <a href="#" class="inline-flex items-center text-primary hover:text-secondary transition-custom font-medium">
                            查看全部服务 <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>

                <div class="relative">
                    <div class="relative z-10 rounded-2xl overflow-hidden shadow-2xl">
                        <img src="https://picsum.photos/800/600?random=20" alt="AI服务展示" class="w-full h-auto">
                        <div class="absolute inset-0 bg-gradient-to-t from-dark/70 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 right-0 p-8 text-white">
                            <h3 class="text-2xl font-bold mb-4">多场景AI解决方案</h3>
                            <div class="grid grid-cols-2 gap-4">
                                <div class="bg-white/10 backdrop-blur-sm p-4 rounded-lg">
                                    <div class="flex items-center mb-2">
                                        <i class="fas fa-building text-2xl mr-3"></i>
                                        <span class="font-medium">企业服务</span>
                                    </div>
                                    <p class="text-sm">智能办公、流程自动化</p>
                                </div>
                                <div class="bg-white/10 backdrop-blur-sm p-4 rounded-lg">
                                    <div class="flex items-center mb-2">
                                        <i class="fas fa-shopping-cart text-2xl mr-3"></i>
                                        <span class="font-medium">智慧零售</span>
                                    </div>
                                    <p class="text-sm">个性化推荐、智能客服</p>
                                </div>
                                <div class="bg-white/10 backdrop-blur-sm p-4 rounded-lg">
                                    <div class="flex items-center mb-2">
                                        <i class="fas fa-hospital text-2xl mr-3"></i>
                                        <span class="font-medium">医疗健康</span>
                                    </div>
                                    <p class="text-sm">辅助诊断、病历分析</p>
                                </div>
                                <div class="bg-white/10 backdrop-blur-sm p-4 rounded-lg">
                                    <div class="flex items-center mb-2">
                                        <i class="fas fa-graduation-cap text-2xl mr-3"></i>
                                        <span class="font-medium">智慧教育</span>
                                    </div>
                                    <p class="text-sm">智能辅导、个性化学习</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 装饰元素 -->
                    <div class="absolute -top-6 -left-6 w-24 h-24 bg-accent/20 rounded-full blur-3xl -z-10"></div>
                    <div class="absolute -bottom-8 -right-8 w-32 h-32 bg-primary/20 rounded-full blur-3xl -z-10"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-white pt-16 pb-8">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
                <div>
                    <div class="flex items-center space-x-2 mb-6">
                        <div class="w-10 h-10 rounded-lg bg-white flex items-center justify-center text-primary">
                            <i class="fas fa-brain text-xl"></i>
                        </div>
                        <span class="text-xl font-bold">AI服务平台</span>
                    </div>
                    <p class="text-gray-400 mb-6">内蒙古大学（蒙古文智能信息处理技术国家地方联合工程研究中心，内蒙古自治区多语种人工智能技术重点实验室）提供AI服务引擎技术服务。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-custom">
                            <i class="fab fa-weixin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-custom">
                            <i class="fab fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-custom">
                            <i class="fab fa-github text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-custom">
                            <i class="fab fa-linkedin text-xl"></i>
                        </a>
                    </div>
                </div>

                <div>
                    <h3 class="text-lg font-bold mb-6">产品服务</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">蒙古文信息处理</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">多语种机器翻译</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">OCR识别技术</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">语音识别与合成</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">智能推荐系统</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-lg font-bold mb-6">资源中心</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">API文档</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">开发教程</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">数据集下载</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">常见问题</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">技术博客</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-lg font-bold mb-6">联系我们</h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fas fa-map-marker-alt mt-1 mr-3 text-gray-400"></i>
                            <span class="text-gray-400">内蒙古自治区呼和浩特市赛罕区大学西街235号</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-envelope mr-3 text-gray-400"></i>
                            <span class="text-gray-400">a15647188816@163.com</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="border-t border-gray-800 pt-8">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2016 内蒙古奥云信息技术服务有限公司 版权所有</p>
                    <div class="flex flex-col md:flex-row space-x-6">
                        <a href="#" class="text-gray-500 hover:text-gray-400 text-sm transition-custom">蒙公网安备15010502001520号</a>
                        <a href="#" class="text-gray-500 hover:text-gray-400 text-sm transition-custom">蒙ICP备18000606号-1</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button id="back-to-top" class="fixed bottom-6 right-6 w-12 h-12 rounded-full bg-primary text-white shadow-lg flex items-center justify-center opacity-0 invisible transition-custom z-50">
        <i class="fas fa-arrow-up"></i>
    </button>

    <!-- 登录模态框 -->
    <div id="login-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm opacity-0 invisible transition-all duration-300">
        <div class="relative w-full max-w-md p-6 bg-white rounded-xl shadow-2xl transform scale-95 transition-all duration-300">
            <button id="close-login" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 transition-custom">
                <i class="fas fa-times text-xl"></i>
            </button>
            <div class="text-center mb-6">
                <h3 class="text-2xl font-bold text-dark">用户登录</h3>
                <p class="text-gray-500 mt-2">登录您的账户，开始使用AI服务</p>
            </div>
            <form id="login-form" class="space-y-4">
                <div>
                    <label for="login-email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                            <i class="fas fa-envelope text-gray-400"></i>
                        </div>
                        <input type="email" id="login-email" name="email" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-custom" placeholder="请输入您的邮箱" required>
                    </div>
                    <p class="hidden text-red-500 text-xs mt-1" id="login-email-error">请输入有效的邮箱地址</p>
                </div>
                <div>
                    <label for="login-password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                            <i class="fas fa-lock text-gray-400"></i>
                        </div>
                        <input type="password" id="login-password" name="password" class="w-full pl-10 pr-10 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-custom" placeholder="请输入您的密码" required>
                        <button type="button" id="toggle-login-password" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600">
                            <i class="fas fa-eye-slash" id="login-password-icon"></i>
                        </button>
                    </div>
                    <p class="hidden text-red-500 text-xs mt-1" id="login-password-error">密码长度至少为8位</p>
                </div>
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input id="remember-me" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                        <label for="remember-me" class="ml-2 block text-sm text-gray-700">记住我</label>
                    </div>
                    <a href="#" class="text-sm text-primary hover:text-secondary transition-custom">忘记密码?</a>
                </div>
                <button type="submit" class="w-full bg-primary hover:bg-secondary text-white py-3 px-4 rounded-lg transition-custom font-medium shadow-lg shadow-primary/20 flex items-center justify-center">
                    <i class="fas fa-sign-in-alt mr-2"></i> 登录
                </button>
            </form>
            <div class="mt-6 text-center">
                <p class="text-gray-600">
                    还没有账户? <button id="switch-to-register" class="text-primary hover:text-secondary transition-custom font-medium">立即注册</button>
                </p>
            </div>
            <div class="mt-6 pt-6 border-t border-gray-200">
                <p class="text-center text-gray-500 text-sm mb-4">其他登录方式</p>
                <div class="flex justify-center space-x-4">
                    <a href="#" class="w-10 h-10 rounded-full bg-[#07C160]/10 flex items-center justify-center text-[#07C160] hover:bg-[#07C160]/20 transition-custom">
                        <i class="fab fa-weixin text-xl"></i>
                    </a>
                    <a href="#" class="w-10 h-10 rounded-full bg-[#1DA1F2]/10 flex items-center justify-center text-[#1DA1F2] hover:bg-[#1DA1F2]/20 transition-custom">
                        <i class="fab fa-twitter text-xl"></i>
                    </a>
                    <a href="#" class="w-10 h-10 rounded-full bg-[#4285F4]/10 flex items-center justify-center text-[#4285F4] hover:bg-[#4285F4]/20 transition-custom">
                        <i class="fab fa-google text-xl"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 注册模态框 -->
    <div id="register-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm opacity-0 invisible transition-all duration-300">
        <div class="relative w-full max-w-md p-6 bg-white rounded-xl shadow-2xl transform scale-95 transition-all duration-300">
            <button id="close-register" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 transition-custom">
                <i class="fas fa-times text-xl"></i>
            </button>
            <div class="text-center mb-6">
                <h3 class="text-2xl font-bold text-dark">用户注册</h3>
                <p class="text-gray-500 mt-2">创建您的账户，开始使用AI服务</p>
            </div>
            <form id="register-form" class="space-y-4">
                <div>
                    <label for="register-name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                            <i class="fas fa-user text-gray-400"></i>
                        </div>
                        <input type="text" id="register-name" name="name" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-custom" placeholder="请输入您的姓名" required>
                    </div>
                    <p class="hidden text-red-500 text-xs mt-1" id="register-name-error">请输入您的姓名</p>
                </div>
                <div>
                    <label for="register-email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                            <i class="fas fa-envelope text-gray-400"></i>
                        </div>
                        <input type="email" id="register-email" name="email" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-custom" placeholder="请输入您的邮箱" required>
                    </div>
                    <p class="hidden text-red-500 text-xs mt-1" id="register-email-error">请输入有效的邮箱地址</p>
                </div>
                <div>
                    <label for="register-password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                            <i class="fas fa-lock text-gray-400"></i>
                        </div>
                        <input type="password" id="register-password" name="password" class="w-full pl-10 pr-10 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-custom" placeholder="请输入密码" required>
                        <button type="button" id="toggle-register-password" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600">
                            <i class="fas fa-eye-slash" id="register-password-icon"></i>
                        </button>
                    </div>
                    <p class="hidden text-red-500 text-xs mt-1" id="register-password-error">密码长度至少为8位，需包含字母和数字</p>
                </div>
                <div>
                    <label for="register-confirm-password" class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                            <i class="fas fa-lock text-gray-400"></i>
                        </div>
                        <input type="password" id="register-confirm-password" name="confirmPassword" class="w-full pl-10 pr-10 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-custom" placeholder="请再次输入密码" required>
                        <button type="button" id="toggle-register-confirm-password" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600">
                            <i class="fas fa-eye-slash" id="register-confirm-password-icon"></i>
                        </button>
                    </div>
                    <p class="hidden text-red-500 text-xs mt-1" id="register-confirm-password-error">两次输入的密码不一致</p>
                </div>
                <div class="flex items-center">
                    <input id="agree-terms" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" required>
                    <label for="agree-terms" class="ml-2 block text-sm text-gray-700">
                        我已阅读并同意 <a href="#" class="text-primary hover:text-secondary transition-custom">服务条款</a> 和 <a href="#" class="text-primary hover:text-secondary transition-custom">隐私政策</a>
                    </label>
                </div>
                <button type="submit" class="w-full bg-primary hover:bg-secondary text-white py-3 px-4 rounded-lg transition-custom font-medium shadow-lg shadow-primary/20 flex items-center justify-center">
                    <i class="fas fa-user-plus mr-2"></i> 注册
                </button>
            </form>
            <div class="mt-6 text-center">
                <p class="text-gray-600">
                    已有账户? <button id="switch-to-login" class="text-primary hover:text-secondary transition-custom font-medium">立即登录</button>
                </p>
            </div>
        </div>
    </div>

    <!-- 通知提示框 -->
    <div id="notification" class="fixed top-4 right-4 max-w-sm bg-white rounded-lg shadow-xl p-4 transform translate-x-full transition-transform duration-300 z-50 flex items-start">
        <div id="notification-icon" class="flex-shrink-0 w-6 h-6 rounded-full bg-green-100 flex items-center justify-center text-green-500 mr-3">
            <i class="fas fa-check"></i>
        </div>
        <div class="flex-1">
            <h4 id="notification-title" class="font-medium text-gray-900">成功</h4>
            <p id="notification-message" class="text-sm text-gray-600 mt-1">操作已完成</p>
        </div>
        <button id="close-notification" class="ml-4 text-gray-400 hover:text-gray-600">
            <i class="fas fa-times"></i>
        </button>
    </div>

    <!-- 引入外部JavaScript -->
    <script src="../static/js/home2.js"></script>
</body>
</html>